<template>
	<view>
		<u-mask :show="vuex_login" @click="modelCancel">
			<view class="warp">
				<view class="accredit_model" @tap.stop>
					<view class="model_container">
						<view class="model_top" :style="{backgroundColor:bgColor}">
							<image class="model_icon" src="../../static/model_img.png"></image>
						</view>
						<view class="model_content">
							<view class="model_title">{{title}}</view>
							<view class="model_desc">{{content}}</view>
							<view class="model_btns">
								<view class="mbtn cancel_btn" @click="modelCancel">取消</view>
								<u-button shape="circle" type="success" v-if="vuex_wx_login == '0'" :custom-style="customStyle" @click="getUserProfile">确定</u-button>
								<u-button v-else :ripple="true" open-type="getPhoneNumber" :custom-style="customStyle" @getphonenumber="getPhoneNumber" shape="circle" type="success">确定</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>
<script>
	import {mapState} from 'vuex';
	const app = getApp();
	export default {
		name:'',
		props:{
			title:{
				type:String,
				default:'授权提示',
				
			},
			// 是否跳转
			isJump: {
				type: Boolean,
				default: true
			},
			content:{
				type:String,
				default:'申请获取用于完整服务',
			},
			bgColor:{
				type:String,
				default:'#19be6b',
			}
		},
		data() {
			return {
				login: {
					appId: '',
					encryptedData: '',
					code: '',
					phone: '',
					shareUserId: '',
					wxOpenId: '',
					anonymousCode: '',
					rawData: '',
					signature: '',
					iv: '',
					scene: '',
					appName: '', // 小程序名称
					appSecret: '', // 小程序密钥
					mchId: '',  // 商户ID
					mchKey: '', // 商户密钥
					oneTemplateId: '', // 小程序模板消息
				},
				customStyle: {
					width: '208rpx',
					height: '82rpx',
					borderRadius: '42rpx',
					marginTop: '44rpx',
					background: '#19be6b',
					fontWeight: '400',
					color: '#fff',
					lineHeight: '82rpx',
					textAlign: 'center',
					fontSize: '32rpx',
				}
			}
		},
		computed: {
			...mapState(['vuex_share_id','vuex_login_to','vuex_user','vuex_login','vuex_wx_login']),
		},
		methods:{
			modelCancel(){
				this.$store.commit('setLogin', false);
				//uni.$emit('login', false);
			},
			getUserProfile() {
				this.login.shareUserId = uni.getStorageSync("shareUserId");
				this.login.wxOpenId = uni.getStorageSync("wxOpenId");
				this.login.scene = uni.getStorageSync("scene");
				const _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						_this.login.code = loginRes.code;
						_this.login.appId = _this.website.appId;
						_this.login.appName = _this.website.appName; // 小程序名称
						_this.login.appSecret = _this.website.appSecret, // 小程序密钥
						_this.login.mchId = _this.website.mchId,  // 商户ID
						_this.login.mchKey = _this.website.mchKey, // 商户密钥
						_this.login.oneTemplateId = _this.website.oneTemplateId, // 小程序模板消息
						_this.$u.post('/auth/wx/login', _this.login).then(res => {
							uni.setStorageSync("userId", res.data.userId);
							var user = _this.vuex_user;
							user.userId = res.data.userId;
							_this.$store.commit('setUser', user);
							uni.setStorageSync("token", res.data.access_token);
							
							if(_this.isJump){
								uni.reLaunch({ 
								  url: '/pages/index'
								});
							}else{
								_this.$u.toast('登陆成功');
							}
							
							/* if(res.data.isWelcome == 1){
								if(_this.vuex_login_to){
									uni.reLaunch({
									  url: '/pages/index/world/index'
									});
								}else{
									_this.$store.commit('setLoginTo', true);
								}
							}else{
								uni.reLaunch({
								  url: '/packgeMine/pages/me/welcome/welcome'
								});
							} */
							
						});
					},
					fail: function() {
						
					}
				});
			},
			getCode() {
				const _this = this;
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						_this.login.code = loginRes.code;
					},
					fail: function() {
						
					}
				});
				// #endif
			},
			getPhoneNumber(e) {
				if(e.detail.errMsg == 'getPhoneNumber:ok'){
					this.login.appId = this.website.appId;
					this.login.code = e.detail.code;
					this.login.encryptedData = e.detail.encryptedData;
					this.login.iv = e.detail.iv;
					this.$u.post('/open/wx/phone',this.login).then(res => {
						this.login.phone = res.data;
						this.weixin();
					})
				}else{
					this.$u.toast('授权失败');
				}
			},
			weixin() {
				this.login.shareUserId = uni.getStorageSync("shareUserId");
				this.login.wxOpenId = uni.getStorageSync("wxOpenId");
				this.login.scene = uni.getStorageSync("scene");
				const _this = this;
				uni.login({
					success: (request) => {
						if (request.code) {
							_this.login.code = request.code;
							_this.$u.post('/auth/wx/login', _this.login).then(res => {
								uni.setStorageSync("userId", res.data.userId);
								var user = _this.vuex_user;
								user.userId = res.data.userId;
								_this.$store.commit('setUser', user);
								uni.setStorageSync("token", res.data.access_token);
								if(_this.isJump){
									uni.reLaunch({
									  url: '/pages/index'
									});
								}else{
									_this.$u.toast('登陆成功');
								}
								
							});
						}
					}
				})
			},
			modelConfirm(){
				this.$emit('confirmModel');
			},
		}
	}
</script>

<style scoped lang="scss">
	.accredit_model{
		width: 560rpx;
		height: 660rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 999;
	}
	.model_container{
		width: 100%;
		height: 660rpx;
	}
	.model_top{
		width: 100%;
		height: 270rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-image: url();
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.model_icon{
		width: 230rpx;
		height: 210rpx;
	}
	.model_content{
		width: 100%;
		height: 390rpx;
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 32rpx;
		box-sizing: border-box;
	}
	.model_title{
		text-align: center;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
	}
	.model_desc{
		width: 448rpx;
		height: 96rpx;
		margin: 20rpx auto 0;
		font-size: 32rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 48rpx;
	}
	.model_btns{
		width: 448rpx;
		height: 82rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}
	.mbtn{
		width: 208rpx;
		height: 82rpx;
		border-radius: 42rpx;
		margin-top: 44rpx;
	}
	.cancel_btn{
		background: #F5F5F5;
		font-weight: 400;
		color: #666666;
		line-height: 82rpx;
		text-align: center;
		font-size: 32rpx;
	}
	.confirm_btn{
		background: #D64532;
		font-weight: 400;
		color: #fff;
		line-height: 82rpx;
		text-align: center;
		font-size: 32rpx;
	}
	.mask{
		z-index: 900;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
	}
</style>